<template>
  <div class="dashboard">
    <!-- 统计卡片 -->
    <div class="stats-row">
      <t-row :gutter="[16, 16]">
        <t-col :xs="24" :sm="12" :md="6">
          <t-card class="stats-card" hover>
            <div class="stats-content">
              <div class="stats-info">
                <div class="stats-title">用户总数</div>
                <div class="stats-value">{{ stats.userCount }}</div>
                <div class="stats-trend">
                  <span class="trend-text">较上月</span>
                  <t-tag theme="success" variant="light">
                    <template #icon><t-icon name="arrow-up" /></template>
                    8.5%
                  </t-tag>
                </div>
              </div>
              <div class="stats-icon">
                <t-icon name="user-circle" />
              </div>
            </div>
          </t-card>
        </t-col>
        <t-col :xs="24" :sm="12" :md="6">
          <t-card class="stats-card" hover>
            <div class="stats-content">
              <div class="stats-info">
                <div class="stats-title">本月订单</div>
                <div class="stats-value">{{ stats.orderCount }}</div>
                <div class="stats-trend">
                  <span class="trend-text">较上月</span>
                  <t-tag theme="success" variant="light">
                    <template #icon><t-icon name="arrow-up" /></template>
                    12.3%
                  </t-tag>
                </div>
              </div>
              <div class="stats-icon">
                <t-icon name="shop" />
              </div>
            </div>
          </t-card>
        </t-col>
        <t-col :xs="24" :sm="12" :md="6">
          <t-card class="stats-card" hover>
            <div class="stats-content">
              <div class="stats-info">
                <div class="stats-title">本月收入</div>
                <div class="stats-value">¥{{ stats.income }}</div>
                <div class="stats-trend">
                  <span class="trend-text">较上月</span>
                  <t-tag theme="success" variant="light">
                    <template #icon><t-icon name="arrow-up" /></template>
                    6.8%
                  </t-tag>
                </div>
              </div>
              <div class="stats-icon">
                <t-icon name="money-circle" />
              </div>
            </div>
          </t-card>
        </t-col>
        <t-col :xs="24" :sm="12" :md="6">
          <t-card class="stats-card" hover>
            <div class="stats-content">
              <div class="stats-info">
                <div class="stats-title">文章浏览量</div>
                <div class="stats-value">{{ stats.viewCount }}</div>
                <div class="stats-trend">
                  <span class="trend-text">较上月</span>
                  <t-tag theme="warning" variant="light">
                    <template #icon><t-icon name="arrow-down" /></template>
                    2.5%
                  </t-tag>
                </div>
              </div>
              <div class="stats-icon">
                <t-icon name="browse" />
              </div>
            </div>
          </t-card>
        </t-col>
      </t-row>
    </div>
    
    <!-- 图表和快速操作 -->
    <t-row :gutter="[16, 16]">
      <!-- 图表区域 -->
      <t-col :xs="24" :lg="16">
        <t-card title="订单统计" class="chart-card">
          <div class="chart-placeholder">图表区域 - 在实际项目中集成ECharts等图表库</div>
        </t-card>
      </t-col>
      
      <!-- 快速操作区 -->
      <t-col :xs="24" :lg="8">
        <t-card title="快速操作" class="action-card">
          <t-row :gutter="[16, 16]">
            <t-col :span="8">
              <div class="action-item" @click="navigateTo('/content/articles')">
                <div class="action-icon">
                  <t-icon name="edit" />
                </div>
                <div class="action-name">发布文章</div>
              </div>
            </t-col>
            <t-col :span="8">
              <div class="action-item" @click="navigateTo('/content/spots')">
                <div class="action-icon">
                  <t-icon name="map" />
                </div>
                <div class="action-name">景点管理</div>
              </div>
            </t-col>
            <t-col :span="8">
              <div class="action-item" @click="navigateTo('/activities')">
                <div class="action-icon">
                  <t-icon name="calendar" />
                </div>
                <div class="action-name">活动管理</div>
              </div>
            </t-col>
            <t-col :span="8">
              <div class="action-item" @click="navigateTo('/orders')">
                <div class="action-icon">
                  <t-icon name="shop" />
                </div>
                <div class="action-name">订单管理</div>
              </div>
            </t-col>
            <t-col :span="8">
              <div class="action-item" @click="navigateTo('/users')">
                <div class="action-icon">
                  <t-icon name="user-circle" />
                </div>
                <div class="action-name">用户管理</div>
              </div>
            </t-col>
            <t-col :span="8">
              <div class="action-item" @click="navigateTo('/statistics')">
                <div class="action-icon">
                  <t-icon name="chart" />
                </div>
                <div class="action-name">数据统计</div>
              </div>
            </t-col>
          </t-row>
        </t-card>
      </t-col>
    </t-row>
    
    <!-- 系统公告和订单列表 -->
    <t-row :gutter="[16, 16]">
      <!-- 系统公告 -->
      <t-col :xs="24" :lg="12">
        <t-card title="系统公告">
          <t-list>
            <t-list-item v-for="(notice, index) in notices" :key="index">
              <t-list-item-meta
                :title="notice.title"
                :description="notice.content"
              >
                <template #avatar>
                  <t-tag theme="primary" variant="light">{{ notice.type }}</t-tag>
                </template>
              </t-list-item-meta>
              <template #action>
                <t-space>
                  <span class="notice-time">{{ notice.time }}</span>
                </t-space>
              </template>
            </t-list-item>
          </t-list>
        </t-card>
      </t-col>
      
      <!-- 最近订单 -->
      <t-col :xs="24" :lg="12">
        <t-card title="最近订单">
          <t-table 
            :data="recentOrders" 
            :columns="orderColumns"
            :border="{ headerTop: false }"
            size="small"
            :hover="true"
            :stripe="true"
            :pagination="{ pageSize: 5 }"
          ></t-table>
        </t-card>
      </t-col>
    </t-row>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import type { PrimaryTableCol } from 'tdesign-vue-next'

const router = useRouter()

// 导航到指定路由
const navigateTo = (path: string) => {
  router.push(path)
}

// 统计数据
const stats = reactive({
  userCount: '3,285',
  orderCount: '864',
  income: '84,625.00',
  viewCount: '12,768'
})

// 系统公告
const notices = ref([
  {
    type: '系统',
    title: '系统升级通知',
    content: '系统将于明日凌晨2:00-4:00进行升级维护，请合理安排您的工作。',
    time: '1小时前'
  },
  {
    type: '活动',
    title: '端午活动预告',
    content: '端午节活动将于下周一开始上线，请各部门做好相关准备。',
    time: '3小时前'
  },
  {
    type: '提醒',
    title: '内容审核提醒',
    content: '有5篇新文章待审核，请及时处理。',
    time: '5小时前'
  },
  {
    type: '通知',
    title: '后台管理系统更新v1.2',
    content: '后台管理系统已更新到v1.2版本，新增多项功能，欢迎体验。',
    time: '1天前'
  }
])

// 最近订单
const orderColumns: Array<PrimaryTableCol> = [
  {
    colKey: 'id',
    title: '订单号',
    width: 100
  },
  {
    colKey: 'name',
    title: '产品名称',
    width: 150
  },
  {
    colKey: 'user',
    title: '用户',
    width: 100
  },
  {
    colKey: 'amount',
    title: '金额',
    width: 100
  },
  {
    colKey: 'status',
    title: '状态',
    width: 100
  }
]

const recentOrders = ref([
  {
    id: 'SQ20240601001',
    name: '四季康养1日游',
    user: '张三',
    amount: '¥298',
    status: '已完成'
  },
  {
    id: 'SQ20240602002',
    name: '温泉体验套餐',
    user: '李四',
    amount: '¥568',
    status: '待付款'
  },
  {
    id: 'SQ20240602003',
    name: '养生膳食套餐',
    user: '王五',
    amount: '¥428',
    status: '已付款'
  },
  {
    id: 'SQ20240603004',
    name: '森林徒步体验',
    user: '赵六',
    amount: '¥199',
    status: '已完成'
  },
  {
    id: 'SQ20240603005',
    name: '中医康养套餐',
    user: '孙七',
    amount: '¥688',
    status: '已完成'
  }
])
</script>

<style scoped>
.dashboard {
  padding: 16px;
}

.stats-row {
  margin-bottom: 16px;
}

.stats-card {
  height: 100%;
}

.stats-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stats-info {
  flex-grow: 1;
}

.stats-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.stats-value {
  font-size: 28px;
  font-weight: 600;
  color: #0052D9;
  margin-bottom: 8px;
}

.stats-trend {
  display: flex;
  align-items: center;
}

.trend-text {
  font-size: 12px;
  color: #999;
  margin-right: 8px;
}

.stats-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: rgba(0, 82, 217, 0.1);
  color: #0052D9;
}

.chart-card {
  margin-bottom: 16px;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f7f9fc;
  border-radius: 6px;
  color: #999;
}

.action-card {
  margin-bottom: 16px;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s;
}

.action-item:hover {
  background-color: #f5f5f5;
}

.action-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: rgba(0, 82, 217, 0.1);
  color: #0052D9;
  margin-bottom: 8px;
  font-size: 20px;
}

.action-name {
  font-size: 13px;
}

.notice-time {
  font-size: 12px;
  color: #999;
}
</style> 